<template>
  <a-modal
    :title="currTitle"
    :width="450"
    :visible="visible"
    :closable="false"
    :maskClosable="closable">
    <template slot="footer">
      <a-button v-if="closable" @click="close">关闭</a-button>
      <a-button type="primary" @click="shopOk">确认</a-button>
    </template>

    <a-form>
      <a-form-item
        :labelCol="{span:4}"
        :wrapperCol="{span:20}"
        style="margin-bottom:10px"
        :validate-status="validate_status">
        <a-tooltip placement="topLeft" >
          <template slot="title">
            <span>您隶属于多部门，请选择当前所在部门</span>
          </template>
          <a-avatar style="backgroundColor:#87d068" icon="gold" />
        </a-tooltip>
        <a-select v-model="shopSelected" :class="{'valid-error':validate_status=='error'}" placeholder="请选择门店" style="margin-left:10px;width: 80%">
          <a-icon slot="suffixIcon" type="gold" />
          <a-select-option
            v-for="d in shopList"
            :key="d.id"
            :value="d.id">
            {{ d.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
    </a-form>


  </a-modal>

</template>

<script>
  import { getAction,putAction } from '@/api/manage'
  import Vue from 'vue'
  import store from '@/store/'
  import { USER_INFO,CURRENT_SHOP_INFO } from "@/store/mutation-types"

  export default {
    name: 'ShopSelect',
    props:{
      title:{
        type:String,
        default:"选择门店",
        required:false
      },
      closable:{
        type:Boolean,
        default:false,
        required:false
      },
      username:{
        type:String,
        default:"",
        required:false
      }
    },
    watch:{
      username(val){
        if(val){
          this.loadShopList()
        }
      }
    },
    data(){
      return {
        currTitle:this.title,
        visible:false,
        shopList:[],
        shopSelected:"",
        validate_status:"",
        currShopName:"",
      }
    },
    created(){
      //this.loadShopList()
    },
    methods:{
      loadShopList(){
        return new Promise(resolve => {
          let url = "/sys/user/getCurrentUserShops"
          this.currShopName=''
          getAction(url).then(res=>{
            if(res.success){
              let shops = res.result.list
              this.shopList = shops
              let currentShopId = res.result.currentSelectedShopId
              console.log("shops---->    ",shops);
              console.log("currentShopId---->    ",currentShopId);
              if(shops && shops.length>0){
                for(let i of shops){
                  if(i.id == currentShopId){
                    this.currShopName = i.name
                    this.shopSelected = i.id
                    break
                  }
                }
              }
              this.ShopSelected = currentShopId
              this.shopList  = shops
              console.log("当前门店名称：：：：：：",this.currShopName)
              if(this.currShopName){
                this.currTitle ="切换门店（当前门店 : "+this.currShopName+"）"
              }
            }
            resolve()
          })
        })
      },
      close(){
        this.shopClear()
      },
      shopOk(){
        if(!this.shopSelected){
          this.validate_status='error'
          return false
        }
        let obj = {
          currentSelectedShopId:this.shopSelected,
          username:this.username
        }
        putAction("/sys/selectShop",obj).then(res=>{
          if(res.success){
            const userInfo = res.result.userInfo;
            const currentShopInfo = res.result.currentShop;
            Vue.ls.set(USER_INFO, userInfo, 7 * 24 * 60 * 60 * 1000);
            Vue.ls.set(CURRENT_SHOP_INFO, currentShopInfo, 7 * 24 * 60 * 60 * 1000);
            store.commit('SET_INFO', userInfo);
            console.log('currentShopInfo--->  selectShop  ',currentShopInfo);
            store.commit('CURRENT_SHOP_INFO',currentShopInfo);
            this.shopClear()
          }
        })
      },
      show(){
        //如果组件传值username此处就不用loadShopList了
        this.loadShopList().then(()=>{
          this.visible=true
          if(!this.shopList || this.shopList.length<=0){
            this.$message.warning("您还没有创建门店!")
            this.shopClear()
          }
        })
      },
      shopClear(){
        this.shopList=[]
        this.shopSelected=""
        this.visible=false
        this.validate_status=''
        this.currShopName=""
      },
    }

  }
</script>
<style scoped>
  .valid-error .ant-select-selection__placeholder{
    color: #f5222d;
  }
</style>